﻿@page "/slider"

@inject IStringLocalizer<Sliders> Localizer

<h3>@Localizer["SlidersTitle"]</h3>

<h4>@Localizer["SlidersDescription"]</h4>

<DemoBlock Title="@Localizer["SlidersNormalTitle"]" Introduction="@Localizer["SlidersNormalIntro"]" Name="Normal">
    <div class="row g-3">
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="CurrentValue" />
                <BootstrapInput @bind-Value="@CurrentValue" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="MinValue" />
                <BootstrapInput @bind-Value="@MinValue" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="MaxValue" />
                <BootstrapInput @bind-Value="@MaxValue" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="DisplayText" />
                <BootstrapInput @bind-Value="@DisplayText" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="Step" />
                <BootstrapInput @bind-Value="@Step" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="IsDisabled" />
                <Checkbox @bind-Value="@IsDisabled" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="UseInput" />
                <Checkbox @bind-Value="@UseInput" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="ShowLabel" />
                <Checkbox @bind-Value="@ShowLabel" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-md-6 col-lg-4 xl-3">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="UseGroup" />
                <Checkbox @bind-Value="@UseGroup" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12">
            @if (UseGroup)
            {
                <BootstrapInputGroup>
                    <BootstrapInputGroupLabel DisplayText="@DisplayText" />
                    @RenderSlider
                </BootstrapInputGroup>
            }
            else
            {
                @RenderSlider
            }
        </div>
        <div class="col-12">
            <ConsoleLogger @ref="Logger" class="mt-3" />
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

@code {
    private string DisplayText { get; set; } = "Range";

    private double MaxValue { get; set; } = 100;
    private double MinValue { get; set; } = -100;
    private double CurrentValue { get; set; } = 0;
    private double Step { get; set; } = 20;

    private bool IsDisabled { get; set; }
    private bool UseInput { get; set; }
    private bool UseGroup { get; set; }
    private bool ShowLabel { get; set; } = true;

    [NotNull]
    private ConsoleLogger? Logger { get; set; }

    private Task OnRangeSliderValueChanged(double value)
    {
        Logger.Log($"RangeSlider: Bind Value: {value}");
        return Task.CompletedTask;
    }

    RenderFragment RenderSlider =>
    @<Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
            DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />;

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {

        new() {
            Name = "IsDisabled",
            Description = Localizer["SlidersIsDisabled"],
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new() {
            Name = "Value",
            Description = Localizer["SlidersValue"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
    };

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "ValueChanged",
            Description = Localizer["SlidersValueChanged"],
            Type ="EventCallback<int>"
        }
    };
}
